<template>
	<view class="content1">
		<view class="input">
			<uni-search-bar placeholder="请输入饮品名称..." bgColor="#EEEEEE" @confirm="search" v-model="searchValue" />
		</view>
		
		<view class="uni-margin-wrap">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item>
							<view class="swiper-item uni-bg-red">
								<image src="https://pic.quanjing.com/s2/w8/QJ6249575264.jpg@!350h" />
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">
								<image src="https://pic.ntimg.cn/file/20220526/12498084_143359464126_2.jpg" />
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">
								<image src="https://img95.699pic.com/photo/50161/1330.jpg_wh300.jpg" />
							</view>
						</swiper-item>
					</swiper>
				</view>
		
		<view class="content">
			<view class="item" v-for="i in tableData">
				<image :src="i.imgUrl" @click="doShowDetails(i.id)"/>
				<view class="word">
					<view >
						<text class="name">{{i.name}}</text>
					</view>
					<view>
						<text class="price">￥{{i.price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
import { ref,onMounted } from 'vue';
import {onReachBottom,onPullDownRefresh} from "@dcloudio/uni-app"

//搜索

const searchValue = ref("")
const search = () => {
		uni.request({
			url: `http://tjx.qywy.cc/goods`,
			success: (res) => {
				//filter:用于从数组中创建一个新的数组，新数组中的元素是通过检查指定数组中每个元素后，符合条件的所有元素。
				const newTableData = res.data.filter((item)=>{
				//includes:用于判断一个字符串是否包含另一个字符串或字符，如果包含则返回 true，否则返回 false
					return item.name.includes(searchValue.value)
				})
				tableData.value=[]
				tableData.value.push(...newTableData);
				
			}
		});
	}
const tableData = ref([])
const page = ref({
	pageNum : "1",
	pageSize:"4",
	maxPage:"0"
})
const query = () => {
		uni.request({
			url: `http://wtp.qywy.cc/goods?_page=${page.value.pageNum}&_per_page=${page.value.pageSize}`,
			success: (res) => {
				page.value.maxPage = res.data.pages
				tableData.value.push(...res.data.data);
				//['a','b','c']     ...['a','b','c']   = 'a','b','c'    push('a','b','c')

			}
		});
	}

onMounted(()=>{
  query()
})

//分页
onReachBottom(()=>{
	if(page.value.pageNum<page.value.maxPage){
		page.value.pageNum++;
		query()
	}
	
	uni.showToast({
		title:"到底了"+page.value.maxPage,
		duration:2000
	})
})
//刷新
onPullDownRefresh(()=>{
	page.value.pageNum = 1
	query()
	uni.showToast({
		title:"数据刷新了",
		duration:2000
	})
})

//展示商品信息
const doShowDetails = (id)=>{
	uni.navigateTo({
		url:`/pages/details/details?id=${id}`
	});
}
</script>

<style scoped>
	.content1{
		background-image: url("https://pic2.zhimg.com/v2-7ba604144747aec55216d41aa5fc5790_r.jpg?source=1940ef5c");
	}
	.content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		
	}
	.item{
		width: 320rpx;
		height: 540rpx;
		margin: 10rpx;
	}
	.item image{
		width: 100%;
		height: 85%;
	}
	.name{
		font-size: 15px;
		margin-left: 10px;
	}
	.price{
		font-size: 10px;
		color: brown;
		margin-left: 10px;
		font-weight: bold;
	}
	swiper-item view image{
		width: 100%;
	}

</style>
